<!DOCTYPE html>
<html>
<head>
    <title>实时评论</title>
    <meta name="referrer" content="no-referrer">
    <style>
        body {
            margin: 0;
            padding-bottom: 3rem;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        #form {
            background: rgba(0, 0, 0, 0.15);
            padding: 0.25rem;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            height: 3rem;
            box-sizing: border-box;
            backdrop-filter: blur(10px);
        }

        #input {
            border: none;
            padding: 0 1rem;
            flex-grow: 1;
            border-radius: 2rem;
            margin: 0.25rem;
        }

        #input:focus {
            outline: none;
        }

        #form > button {
            background: #333;
            border: none;
            padding: 0 1rem;
            margin: 0.25rem;
            border-radius: 3px;
            outline: none;
            color: #fff;
        }

        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #messages > li {
            padding: 0.5rem 1rem;
        }

        #messages > li:nth-child(odd) {
            background: #efefef;
        }
    </style>
</head>
<body>
<ul id="messages">

</ul>
<form id="form" action="">
    <input id="input" autocomplete="off"/>
    <button>Send</button>
</form>

<script src="/socket.io/socket.io.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
<script>
    const socket = io();
    var form = document.getElementById('form');
    var input = document.getElementById('input');
    var messages = document.getElementById('messages');


    form.addEventListener('submit', function (e) {
        e.preventDefault();
        if (input.value) {
            socket.emit('chat message', input.value);
            input.value = '';
        }
    });

    moment.locale('zh-cn')
    socket.on('sendDate', function (data) {
        const replyList = data.dataList;
        const dataList = replyList.map(reply => {
            return {
                ctime: new Date(reply.ctime * 1000),
                comment: reply.content.message,
                username: reply.member.uname,
                avatar: reply.member.avatar,
            }
        })

        for (let i = dataList.length - 1; i >= 0; i--) {
            const data = dataList[i];
            var item = document.createElement('li');
            item.innerHTML = `<div>
                <img src="${data.avatar}" style="width: 50px;height: 50px"/>  <span>${data.username}</span> :
                <p>
                ${data.comment}
            </p>
            <p>
            ${moment(data.ctime).format('yyyy-MM-DD HH:mm:ss')}
            </p>
            </div>`;
            messages.appendChild(item);
            window.scroll(0, document.body.scrollHeight);
        }
    });
</script>
</body>
</html>
